<template>
  <div style="    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;">

    <div style="margin-top: 20px;width:100%;">
      <div class="biaoge">
          <table class="biaotou">
            <tr><td>产品名称</td></tr>
            <tr><td>产品编码</td></tr>
            <tr><td>客户名称</td></tr>
            <tr><td>照 片 数</td></tr>
            <tr><td>格 子 号</td></tr>
          </table>
          
          <table class="neirong">
            <tr><td>{{gridsProDataName}}</td></tr>
            <tr><td>{{orderProductCode}}</td></tr>
            <tr><td>{{ctmName}}</td></tr>
            <tr><td>{{gridsData1Length}}</td></tr>
            <tr><td>{{boardGridId}}</td></tr>
          </table>
          </div>
      <!-- <barcode :options="barcode_option"
               :value="barcodeValue"
               tag="svg"
               style="position: relative;left:100px;marginTop:20px;"></barcode> -->
          <svg id="barcode"></svg>
    </div>
    <!-- <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="WebBrowser" name="WebBrowser" width="0"></OBJECT> -->
  </div>

</template>

<script>
  import VueBarcode from 'vue-barcode'

  export default {
    name: 'Print2DCode',
    components: {
      'barcode': VueBarcode
    },
    data() {
      return {
        // barcode_option: {
        //   displayValue: true,
        //   background: '#fff',
        //   fontSize: '30px',
        // },
        barcodeValue: '',
        gridsProDataName: '', 
        orderProductCode:'',
        ctmName:'',
        gridsData1Length:'',
        boardGridId:'',
        printer:''
      }
    },

    created() {
      const { barcodeValue, gridsProDataName,orderProductCode,ctmName,printer,gridsData1Length,boardGridId} = this.$route.query
      document.title = '条形码打印'
      this.barcodeValue = barcodeValue
      this.gridsProDataName = gridsProDataName
      this.orderProductCode = orderProductCode
      this.ctmName = ctmName
      this.printer = printer
      this.gridsData1Length =gridsData1Length
       this.boardGridId = boardGridId
    },
    methods:{
      barcode() {
        JsBarcode('#barcode',this.barcodeValue,{
          format: 'CODE128',//选择要使用的条形码类型
          text: this.barcodeValue,
          displayValue: true,//是否在条形码下方显示文字
          // textPosition: 'top'//设置文本的垂直位置
          width: 1.5,
          height:90,
          fontSize:'24px',
          marginTop:'20px',
          // marginLeft:'20px'
        })
      }
    },
    mounted() {

      this.$nextTick(()=>{
        // print()
        // if(!this.printer){
          this.barcode();

          print()
        // }else{
        //     // var printName = '';
        //     var xhr;
        //     //创建XHR对象的函数
        //     function createXHR() {
        //       try {
        //         return new XMLHttpRequest();
        //       } catch (e) {
        //         return new ActiveXObject("Microsoft.XMLHTTP");
                
                
        //       }
        //         var localtor = new ActiveXObject("WbemScripting.SWbemLocator");
        //         var service = localtor.ConnectServer(".");
        //         var properties = service.ExecQuery("SELECT * FROM Win32_Printer");
        //         //修改成指定打印机
        //         var e = new Enumerator(properties);
        //         for (; !e.atEnd(); e.moveNext()) {
        //             var p = e.item();
        //             if (p.Name == this.printer) {
        //                 p.setDefaultPrinter();
                      
        //                 break;
        //             }
        //         }
        //          print()
        //     }
        //  document.getElementById("WebBrowser").execwb(6, 2);
        // }
            
      })
    }

  }
</script>

<style lang="scss" scoped>
body{
  height: 100mm;
  width:70mm;
  .biaoge{
    width: 56mm;
    height: 60mm;
    margin: 0 auto;
    .biaotou{
      float: left;
      height: 60mm;
      width: 18mm;
      td{
          border: 2px solid #ccc;
          text-align: center;
          font-size: 13px;
        //  font-weight: 600;
      }
      // border: 1px solid #ccc;
    }
    .neirong{
      float: left;
      height: 60mm;
      width: 38mm;
      td{
        text-align: center;
        border: 2px solid #ccc;
        border-left: none;
        font-size: 12px;
      //  font-weight: 600;
      }
    }
  }
  #barcode{
    width:98%;
    margin: 0 auto;
    position: relative;
    left:10px;
  }
}
// .tiaoxingma {
//   width: 200px;
//   margin: 0 auto;
//   margin-left: 170px;
//   margin-top: 20px;
// }

</style>
